<template>
  <!-- 与树节点显示一致的组件 -->
  <div class="v-property-node-label">
    <div
      v-for="(item, index) of valueData"
      :key="index"
      class="g-pd-l-8 g-one-line _lable-item"
      :class="{ 'label-selected': selected && selectedModelId === item.id }"
      @click="emit('clickItem', item)"
      @contextmenu="propertyModelContextMenu($event, item)"
    >
      <span v-if="encrypted || item?.hiddenStatus === HiddenStatus.HIDDEN_IN_ENCAP">
        {{ desensitize(item.showAttribute?.displayName || item.name) }}
      </span>
      <template v-else>
        <img
          :src="item.icon"
          style="margin-right: 2px; width: 16px; height: 16px; object-fit: contain"
        />
        <NodeLabel
          class="g-one-line"
          :nodeData="item"
          :selected="false"
          :disabled="false"
          :showNew="false"
          :showQualifiedName="true"
        />
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { ref, watch } from "vue";
import { NodeData } from "@/modules/model/project/IGraphNode";
import NodeLabel from "@/modules/model/comps/station/sider/modelTree/modelTree/NodeLabel.vue";
import { propertyModelContextMenu } from "../propertyUtil";
import { desensitize } from "@/util/common";
import { HiddenStatus } from "@/constants/Enums";

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  selectedModelId?: string;
  tableElementDisabled?: boolean;
  encrypted?: boolean;
  mode?: string; // 新增横向horizontal模式, 以便在一行内显示内容
}>();

const emit = defineEmits<{
  (e: "clickItem", value: NodeData): void;
}>();

const valueData = ref<NodeData[]>([]);

watch(
  () => props.row,
  async () => {
    let rowValue: NodeData[] = [];

    if (props.row.value && Array.isArray(props.row.value)) {
      rowValue = props.row.value as NodeData[];
    } else if (props.row.value instanceof Object) {
      rowValue = [props.row.value] as NodeData[];
    }

    valueData.value = rowValue;
  },
  { immediate: true }
);
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-property-node-label {
  .label-selected {
    color: $theme-color;
    .v-model-tree-node-label {
      ._name-label,
      ._type-label {
        color: $theme-color;
      }
    }
  }

  ._lable-item {
    display: flex;
    align-items: center;
    min-height: 24px;
  }
}
</style>
